<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import "echarts-wordcloud"; // 确保引入词云插件
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {},
  created() {
    this.getData()
  },
  computed: {
  },
  mounted() { },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, 30000);
    },
    getData() {
      getAction("/asset/Statistics/roleUserTotal").then((res)=>{
        if(res.success){
          this.init(res.result);
          this.switper()
        }else{
          this.$message.warning(res.message);
        }
      })
      // currentGET('roleUserTotal').then(res => {
      //   if (res.success) {
      //     this.init(res.result);
      //     this.switper()
      //   } else {
      //     this.$Message({
      //       text: res.msg,
      //       type: 'warning'
      //     })
      //   }
      // })
      
    },
    init(newData) {
      this.options = {
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 8,
            sizeRange: [14, 60],
            rotationRange: [-45, 45],
            shape: "circle",
            drawOutOfBound: true,
            textStyle: {
              fontFamily: "Arial, sans-serif",
              fontWeight: "bold",
              color: function () {
                const colors = [
                  "#4B8BF4", "#50C5B7", "#F4E04B", "#F45B69", "#A28BF4", "#4BF4A2",
                ]; // 优化后的颜色数组
                return colors[Math.floor(Math.random() * colors.length)];
              },
            },
            emphasis: {
              textStyle: {
                shadowBlur: 15,
                shadowColor: "#000",
                color: "#FFFFFF", // 高亮时的颜色
              },
            },
            data: newData.map((item) => ({
              name: item.name,
              value: item.value,
            })),
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>

.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
